<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="分享超级返"></commonTitle>
		</view>
		<!-- #endif -->
		<view class="tip">左右滑动选择你喜欢的主题再分享</view>
		<view class="list-scroll-content">
			
			<view class="my-share-detail">
				<view class="swiper-box">
					<image src="../../../static/common/left-icon.png" 
					@tap='changeTab(1)' :class="{'captial-slected':currentIndex == 0}"
					class="left-icon"></image>
					<image src="../../../static/common/right-icon.png" 
					@tap='changeTab(2)' :class="{'captial-slected':currentIndex == 1}"
					class="right-icon"></image>
					<swiper class="swiper"
						@change="slideItem"
						:current="currentTab"
					 :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item>
									<image src="../../../static/common/poster-share-01.png" class="share-bg"></image>
									<image src="../../../static/common/sub-share-btn-img.png" class="share-btn" @tap="shareFc(1)"></image>
							</swiper-item>
							<swiper-item>
									<image src="../../../static/common/poster-share-02.png" class="share-bg"></image>
									<image src="../../../static/common/sub-share-btn-img.png" class="share-btn" @tap="shareFc(2)"></image>
							</swiper-item>
							<swiper-item>
									<image src="../../../static/common/poster-share-03.png" class="share-bg"></image>
									<image src="../../../static/common/sub-share-btn-img.png" class="share-btn" @tap="shareFc(3)"></image>
							</swiper-item>
							<swiper-item>
									<image src="../../../static/common/poster-share-04.png" class="share-bg"></image>
									<image src="../../../static/common/sub-share-btn-img.png" class="share-btn" @tap="shareFc(4)"></image>
							</swiper-item>
					</swiper>
				</view>
					
				<view class="share-text">成功邀请的好友，每一笔你都能获得额外收益</view>
				<!-- <image src="../../../static/common/sub-share-btn-submit.png" class="share-submit"></image> -->
			</view>
			
			
			<!-- 海报绘制 -->
			<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
				<view class="flex_column">
					<view class="backgroundColor-white padding1vh border_radius_10px">
						<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
					</view>
					<view class="flex_row marginTop2vh">
						<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
						<button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button>
					</view>
				</view>
			</view>
			<!-- <button type="primary" @tap="shareFc(1)">生成海报</button> -->
			<view class="hideCanvasView">
				<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
			</view>
			
			<!--海报绘制-->
			
		</view>
		
		
		
	</view>
</template>

<script>
	import _app from '@/util/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/util/QS-SharePoster/QS-SharePoster.js';
	import commonTitle from'../../../components/sub-titile/title.vue'
	export default{
		components:{
			commonTitle
		},
		data () {
			return {
				bgc:false, //页面滚动顶部状态栏改变颜色
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				qrcoedSrc:"",
				
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				currentIndex:0,
				currentTab:0,  //sweiper所在页
				
			}
		},
		onLoad() {
			this.getInviteUrl();
		},
		methods: {
			getInviteUrl(){
				//获取邀请链接，邀请链接有时间有效期，所以不能缓存，要实时获取
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.userView,
					data:{
						apptoken:uni.getStorageSync('apptoken')
					},
					success(res) {
							console.log(res)
							if(res.data.success){
								_this.qrcoedSrc = res.data.data.inviteUrl;
								console.log(_this.qrcoedSrc)
							}
					}
				})
			},
			changeTab(index){
				if(index == 1){
					//左滑
					if(this.currentTab == 0){
						this.currentTab = 3;
					}
					this.currentTab = this.currentTab - 1;
				}else if(index == 2){
					//右滑
					if(this.currentTab == 3){
						this.currentTab = 0;
					}
					this.currentTab = this.currentTab + 1;
				}
				
			},
			//touch swipe-item
			slideItem(event){
				this.currentIndex = event.detail.current;
			},
			async shareFc(postId) {
				try {
					console.log('准备生成:' + new Date())
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据
							postId:postId
						},
						posterCanvasId: this.canvasId,	//canvasId
						delayTimeScale: 20, //延时系数
						/* background: {
							width: 1080,
							height: 1920,
							backgroundColor: '#666'
						}, */
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([
									{
										type: 'qrcode',
										text:this.qrcoedSrc ,
										size: bgObj.width * 0.34,
										dx: bgObj.width * 0.33,
										dy: bgObj.height * 0.64
									}
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif
			
				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			}
		}
		
	}
</script>

<style scoped>
	@import url("sub-share.css");
	.hideCanvasView {
		position: relative;
	}
	
	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
	
	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}
	
	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}
	
	.flex_column {
		display: flex;
		flex-direction: column;
	}
	
	.backgroundColor-white {
		background-color: white;
	}
	
	.border_radius_10px {
		border-radius: 10px;
	}
	
	.padding1vh {
		padding: 1vh;
	}
	
	.posterImage {
		width: 60vw;
	}
	
	.flex_row {
		display: flex;
		flex-direction: row;
	}
	
	.marginTop2vh {
		margin-top: 2vh;
	}
	.marginTop2vh button{
		background: #F4637A;
	}
</style>
